<template>
    <div class="tableCommon-wrapper">
        <a-table :columns="columns" :dataSource="data" :loading="loading" @change="handleTableChange" :rowKey="rowKey"
            :bordered="bordered" :scroll="scroll" ellipsis :pagination="pagination" :row-selection="selection"
            :childrenColumnName="childrenColumnName" :customRow="handleClickRow" :rowClassName="rowClassName" size="middle"
            v-bind="$props">
            <!-- <template v-slot:[item]="scope" v-for="item in renderList">
                <slot :name="item" :scope="scope" ></slot>
            </template> -->
        </a-table>
    </div>
</template>

<script setup lang="ts">
import { useSlots } from "vue";
defineProps({
    columns: {
        type: Array,
        required: true,
        default: () => [],
    },
    data: {
        type: Array,
        required: true,
        default: () => [],
    },
    loading: {
        type: Boolean,
        default: false
    },
    bordered: {
        type: Boolean,
        default: true
    },
    pagination: {
        type: Object || Boolean
    },
    selection: {
        type: Object
    },
    scroll: {
        type: Object,
        default: () => {
            x: 400
        }
    },
    rowKey: {
        type: String,
        default: 'id'
    },
    childrenColumnName: {
        type: String,
        default: 'children'
    },
    handleClickRow: {
        type: Function,
        default: null
    },
    rowClassName: {
        type: Function,
        default: (__record: any, index: number) => { if (index % 2 != 0) return 'stripe'; }
    }
});
const slots = useSlots();
const renderList = Object.keys(slots);
console.log(renderList)
const emit = defineEmits(['changeTable'])
const handleTableChange = (form: any, filter: any, sorter: any) => {
    emit('changeTable', {
        form,
        filter,
        sorter
    });
}
</script>
<style lang="scss" scoped>
.tableCommon-wrapper {
    :deep(.ant-table-wrapper) {
        box-shadow: 0 0 10px #e8e8e8;
    }
}

:deep(.selected-row) {
    background: #e6f7ff;
}

:deep(.stripe) {
    background: #FAFAFA;
}
</style>
